class ReinSwitch extends HTMLElement {
    state = {
        checked: false,
    }

    static observedAttributes = ['checked'];
    constructor() {
        super();
    }
    connectedCallback() {
        console.log('rein-switch connectedCallback');
        console.log(this.state.checked);
        const shadow = this.attachShadow({ mode: 'open' });
        const template = document.createElement('template');
        template.innerHTML = `<style>
        .switch-container {
          width: 60px;
          height: 30px;
          background-color: rgb(0, 132, 255);
          border-radius: 15px;
          cursor: pointer;
        }
        .switch-container .action {
          width: 25px;
          height: 25px;
          background-color: white;
          border-radius: 50%;
          position: relative;
          top: 2.5px;
          left: 2.5px;
          transition: all 0.35s;
          transform: translateX(0px);
        }
        .switch-container.active {
          background-color: rgb(255, 0, 0);
        }
        .switch-container.active .action {
          transform: translateX(30px);
        }
      </style>
      <div class="switch-container ">
        <div class="action"></div>
      </div>`;
        shadow.appendChild(template.content.cloneNode(true));
        const container = shadow.querySelector('.switch-container');
        container.addEventListener('click', () => {
            console.log('click');
            container.classList.toggle('active');
        })

    }

    attributeChangedCallback(name, oldValue, newValue) {
        console.log('rein-switch attributeChangedCallback');
        this.state.checked = this.getAttribute('checked') === 'true';
        const switchBox = this.querySelector('.switch-container');
        if (switchBox) {
            switchBox.classList.toggle('active');
        }
    }
}

// 1. 创建一个 shadow DOM
customElements.define('rein-switch', ReinSwitch);